<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 17:28:26
-->
<template>
  <!--1. 容器 -->
  <div ref="right2_container" style="height: 95%"></div>
</template>
<script>
import { Column } from '@antv/g2plot';
export default {
  data(){
    return {
      dataArr:[{
    type: '2017',
    sales: 281.1,
  },
  {
    type: '2018',
    sales: 276.4,
  },
  {
    type: '2019',
    sales: 272,
  },
  {
    type: '2020',
    sales: 268.4,
  },
  {
    type: '2021',
    sales: 270,
  },
  {
    type: '2022',
    sales: 273,
  },]
    }
  },
   mounted(){
     this.initChart()
   },
   methods:{
     initChart(){
       const column = new Column(this.$refs.right2_container,{
         data:this.dataArr,
         xField: 'type',
         yField: 'sales',
         xAxis:{
           label:{
             rotate:-45,
             offset:20
           }
         },
         tooltip:{
           fields:['type','sales'],
           domStyles:{
             'g2-tooltip':{
               padding:'5x',
               background:'rgba(47,6,178,0.8)',
               color:'#fff',
               fontSize:'15px',

             }
           }
         }
       })
       column.render()
     }
   }
 
}
</script>